<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上传文件到OSS</title>
</head>
<body>
  <div class="container">
    <form>
      <div class="mb-3">
        <label for="file" class="form-label">选择文件</label>
        <input type="file" class="form-control" id="file" name="file" required>
      </div>
      <button type="submit" class="btn btn-primary">上传</button>
    </form>
  </div>
  <script type="text/javascript">
      const form = document.querySelector('form');
      const fileInput = document.querySelector('#file');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        let file = fileInput.files[0];
        let filename = fileInput.files[0].name;
        fetch('http://127.0.0.1:6234/aliUpload/getStsToken', { method: 'GET' })
          .then(response => response.json())
          .then(data => {
            const formData = new FormData();
            formData.append('name',filename);
            formData.append('policy', data.policy);
            formData.append('OSSAccessKeyId', data.ossAccessKeyId);
            formData.append('success_action_status', '200');
            formData.append('signature', data.signature);
            formData.append('key', data.dir + filename);
            // file必须为最后一个表单域，除file以外的其他表单域无顺序要求。
            formData.append('file', file);
            fetch(data.host, { method: 'POST', body: formData},).then((res) => {
              console.log(res);
              alert('文件已上传');
            });
          })
          .catch(error => {
            console.log('Error occurred while getting OSS upload parameters:', error);
          });
      });
  </script>
</body>
</html> -->
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>OSS web直传</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
  </head>
  <body>
    <h2>OSS web直传---在服务端用Node.js签名</h2>
    <ol>
      <li>
        Bucket必须设置跨域，且允许Methods必须选中POST，否则无法执行表单上传。
      </li>
    </ol>
    <br />
    <div>
      <input type="file" id="fileInput" name="fileInput" />
      <input type="button" value="开始上传" onclick="upload()" />
    </div>
    <script>
      function upload() {
        const tokenUrl = "http://127.0.0.1:6234/aliUpload/getStsToken";
        fetch(tokenUrl).then(async (res) => {
          const { policy, signature, accessid, host, dir, stsToken } =
            await res.json();

          let formData = new FormData();
          formData.append("success_action_status", "200"); // 指定成功上传时，服务端返回状态码200，默认返回204。
          formData.append("policy", policy);
          formData.append("signature", signature);
          formData.append("OSSAccessKeyId", accessid);
          if (stsToken) formData.append("x-oss-security-token", stsToken);

          const files = document.getElementById("fileInput").files;
          if (files.length === 0) {
            alert("请选择文件");
            return;
          }
          formData.append("key", dir + files[0].name); // 文件名
          formData.append("file", files[0]); // file必须为最后一个表单域

          const param = {
            method: "POST",
            body: formData,
          };
          fetch(host, param)
            .then((data) => {
              console.log(data);
              alert("上传成功");
            })
            .catch((error) => {
              console.error("Error:", error);
            });
        });
      }
    </script>
  </body>
</html>
